<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript调用摄像头拍照、录制</title>
  </head>
  <body>
    <!-- <video id="preview" autoplay></video>
    <canvas id="canvas" style="display: none"></canvas>
    <img id="photo" alt="Photo" style="display: none" /> -->
    <button id="takePhotoButton">拍照</button>

    <video id="recording" controls style="display: none"></video>
    <button id="startRecordingButton" onclick="startRecording()">
      开始录制
    </button>
    <button id="stopRecordingButton" onclick="stopRecording()">停止录制</button>

    <script>
      var recordingElement = document.getElementById("recording");
      var startRecordingButton = document.getElementById(
        "startRecordingButton"
      );
      var stopRecordingButton = document.getElementById("stopRecordingButton");
      var chunks = [];
      // if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      //   const displayMediaOptions = {
      //     video: {
      //       cursor: "always", // 显示鼠标光标
      //       logicalSurface: true,
      //     },
      //     audio: {
      //       noiseSuppression: true, // 噪音消除
      //       echoCancellation: true, // 回声消除
      //     },
      //   };
      //   navigator.mediaDevices
      //     .getDisplayMedia(displayMediaOptions)
      //     .then(function (stream) {
      //       // var videoElement = document.getElementById("preview");
      //       // var canvasElement = document.getElementById("canvas");
      //       // var context = canvasElement.getContext("2d");
      //       // var imageElement = document.getElementById("photo");
      //       // var takePhotoButton = document.getElementById("takePhotoButton");

      //       // videoElement.srcObject = stream;

      //       takePhotoButton.addEventListener("click", function () {
      //         // context.drawImage(
      //         //   videoElement,
      //         //   0,
      //         //   0,
      //         //   canvasElement.width,
      //         //   canvasElement.height
      //         // );
      //         // imageElement.src = canvasElement.toDataURL("image/png");
      //         // imageElement.style.display = "block";
      //         // 下载图片
      //         // var link = document.createElement("a");
      //         // link.href = imageElement.src;
      //         // link.download = `图片-${new Date().getTime()}.png`; // 设置下载文件的文件名
      //         // link.click();
      //       });

      //       var mediaRecorder;

      //       startRecordingButton.addEventListener("click", function () {
      //         var chunks = [];
      //         mediaRecorder = new MediaRecorder(stream);
      //         window.mediaRecorder = mediaRecorder;
      //         mediaRecorder.ondataavailable = function (e) {
      //           chunks.push(e.data);
      //         };

      //         mediaRecorder.onstop = function () {
      //           var blob = new Blob(chunks, { type: "video/webm" });
      //           recordingElement.src = URL.createObjectURL(blob);

      //           // 下载视频
      //           var link = document.createElement("a");
      //           link.href = URL.createObjectURL(
      //             new Blob(chunks, { type: "video/mp4" })
      //           ); //这里可以修改格式 比如我修改为mp4
      //           link.download = `视频-${new Date().getTime()}.mp4`; // 设置下载文件的文件名
      //           link.click();
      //         };

      //         mediaRecorder.start();
      //         recordingElement.style.display = "block";
      //       });

      //       stopRecordingButton.addEventListener("click", function () {
      //         debugger;
      //         mediaRecorder.stop();
      //       });
      //     })
      //     .catch(function (error) {
      //       console.error("获取摄像头输入流失败:", error);
      //     });
      // } else {
      //   console.error("浏览器不支持摄像头调用");
      // }
      /**录屏 */
      async function startRecording() {
        try {
          const displayMediaOptions = {
            video: {
              cursor: "always", // 显示鼠标光标
              logicalSurface: true,
            },
            audio: {
              noiseSuppression: true, // 噪音消除
              echoCancellation: true, // 回声消除
            },
          };

          var stream = await navigator.mediaDevices.getDisplayMedia(
            displayMediaOptions
          );
          var mimeType = "video/webm"; // 输出视频格式  webm
          window.mediaRecorder = new MediaRecorder(stream, {
            mimeType: mimeType,
          });

          // 处理录制的数据
          window.mediaRecorder.ondataavailable = handleDataAvailable;

          // 开始录制
          window.mediaRecorder.start();
          recordingElement.style.display = "block";
          console.log("Recording started");
        } catch (e) {
          console.error("Error recording screen:", e);
        }
      }

      function handleDataAvailable(event) {
        if (event.data && event.data.size > 0) {
          debugger;
          chunks.push(event.data);
          var blob = new Blob(chunks, { type: "video/webm" });
          recordingElement.src = URL.createObjectURL(blob);
          console.log(event);
          // 处理录制的数据片段
          // 例如，可以将数据存储到数组或发送到服务器
        }
      }
      // 停止录制的函数
      function stopRecording() {
        window.mediaRecorder.stop();
        console.log("Recording stopped");
      }
    </script>
  </body>
</html>
